/**
 * 一个使图片大小缩放合适的插件,目的是保证图片缩放不失真模糊
 * useage: $('.img-wrappger').scaleImage({
 *   imgSelector:".img",
 *   fillBgColor:"#000"
 * })
 */
(function ($) {
    var defaultConfig = {
        /**
         * 容器内部图片选择器，默认选择img标签
         */
        imgSelector: "img",
        /**
         * 图片缩放小于容器宽高时候的填充背景颜色
         */
        fillBgColor: "#6cf"
    }
    var ScaleImage = function (rootDom, config) {
        this.id = ScaleImage.idIndex++;
        this.rootDom = rootDom;
        this.config = $.extend({}, defaultConfig, config);
        /**
         * 图片容器 Dom
         */
        this.imgContainerDom = this.rootDom;
        /**
         * 图片 Dom
         */
        this.imgDom = this.rootDom.find(this.config.imgSelector);
        this.init();
    }

    ScaleImage.idIndex = 0;

    ScaleImage.prototype.init = function () {
        if (this.imgDom.length === 0) {
            throw new Error("通过 imgSelector 没有找到dom");
        }
        this.setAppendData();
        this.setImageAutoScale();
    }

    /**
     * 设置附加数据
     */
    ScaleImage.prototype.setAppendData = function () {
        var imgContainerDom = this.imgContainerDom;
        var imgDom = this.imgDom;
        var containerHeight = imgContainerDom.innerWidth();
        imgContainerDom.css({
            overflow: "hidden",
            'background-color': this.config.fillBgColor,
            'text-align': 'center',
            'line-height': containerHeight + 'px'
        });
        if(imgDom.css("vertical-align")==="baseline"){
            imgDom.css({
                'vertical-align': 'middle'
            });
        }
    };
    /**
     * 设置图片自动缩放
     */
    ScaleImage.prototype.setImageAutoScale = function () {
        var imgContainerDom = this.imgContainerDom;
        var imgDom = this.imgDom;
        var containerWidth = imgContainerDom.innerWidth();
        var containerHeight = imgContainerDom.innerHeight();
        var imgWidth = imgDom.get(0).naturalWidth;
        var imgHeight = imgDom.get(0).naturalHeight;

        //如果图片大小和容器大小一样大，不做任何处理
        if (imgWidth === containerWidth && imgHeight === containerHeight) {
            return;
        }
        //如果图片大小比容器小
        if (imgWidth < containerWidth && imgHeight < containerHeight) {
            var newImgWidth = imgWidth;
            var newImgHeight = imgHeight;
            //如果比例差距不超过20% ,则以容器的宽度为准，即适当的拉伸
            if ((newImgWidth / containerWidth) * 10 > 8) {
                newImgWidth = containerWidth;
            }
            if ((newImgHeight / containerHeight) * 10 > 8) {
                newImgHeight = containerHeight;
            }
            imgDom.css({
                width: newImgWidth + "px",
                height: newImgHeight + "px",
            });
        } else {
            var widthRate = containerWidth / imgWidth;
            var heightRate = containerHeight / imgHeight;
            //以容器和图片的宽高比例中【最小】的一个进行
            var rate = widthRate < heightRate ? widthRate : heightRate;
            var newImgWidth = Math.floor(imgWidth * rate);
            var newImgHeight = Math.floor(imgHeight * rate);
            //如果比例差距不超过20% ,则以容器的宽度为准，即适当的拉伸
            if ((newImgWidth / containerWidth) * 10 > 8) {
                newImgWidth = containerWidth;
            }
            if ((newImgHeight / containerHeight) * 10 > 8) {
                newImgHeight = containerHeight;
            }
            imgDom.css({
                width: newImgWidth + "px",
                height: newImgHeight + "px",
            });
        }
    }

    $.fn.extend({
        scaleImage: function (config) {
            if (config === null || config === undefined) {
                config = {};
            }
            if (this.data("__scaleImage") === undefined || this.data("__scaleImage") === null) {
                var rootDom = this;
                this.data("__scaleImage", new ScaleImage(rootDom, config));
            }
            return this.data("__scaleImage");
        }
    });
})(jQuery);
